<template>
  <div class="app-container">
    <!-- 搜索部分 -->
    <div class="search-container">
      <el-autocomplete
          style="width: 90%"
          popper-class="my-autocomplete"
          v-model="sname"
          :fetch-suggestions="querySearch"
          placeholder="请输入姓名"
          @select="handleSelect"
      >
        <!-- 自定义后缀图标 -->
        <template #suffix>
          <el-icon @click="handleIconClick" style="cursor: pointer;">
            <Edit />
          </el-icon>
        </template>

        <!-- 自定义下拉建议项 -->
        <template #default="{ item }">
          <div class="name">{{ item.value }}</div>
        </template>
      </el-autocomplete>

      <el-button type="primary" @click="sendMessage" style="margin-left: 10px;">
        搜索
      </el-button>
    </div>

    <!-- 空状态 -->
    <el-empty v-if="!showDetails" description="请输入姓名并点击发送按钮" />

    <!-- 消息详细信息 -->
    <el-descriptions v-if="showDetails" title="消息详情" direction="vertical" :column="4" border>
      <el-descriptions-item label="发送方姓名">{{ senderName }}</el-descriptions-item>
      <el-descriptions-item label="账号">{{ account }}</el-descriptions-item>
      <el-descriptions-item label="接收方姓名" :span="2">{{ receiverName }}</el-descriptions-item>
      <el-descriptions-item label="发送方性别">
        <el-tag size="small">{{ gender }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="消息内容">{{ messageContent }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {analyzeMessage} from '../Api/api.js';
import { Edit } from '@element-plus/icons-vue';

export default {
  components: {
    Edit,
  },
  data() {
    return {
      sname: '',
      showDetails: false,
      senderName: '',
      account: '',
      receiverName: '',
      gender: '',
      messageContent: '',
      restaurants: [
        { value: '茹鸿晖' },
        { value: '闭泰然' },
        { value: '乙翰音' },
        { value: '朱诚' },
        { value: '刘宏扬' },
      ],
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
          ? this.restaurants.filter(this.createFilter(queryString))
          : this.restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) =>
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick() {
      console.log('编辑图标被点击');
    },
    async sendMessage() {
      if (!this.sname) {
        alert('请输入姓名');
        return;
      }

      try {
        const response = await analyzeMessage('api/message/name', { sname: this.sname });

        // 确保从后端返回的数据结构正确
        if (response) {
          this.senderName = response.senderName;
          this.account = response.senderAccount;
          this.receiverName = response.receiverName;
          this.gender = response.senderSex;
          this.messageContent = response.message;
          this.showDetails = true; // 显示消息详情
        }

        console.log('后端响应:', response);
      } catch (error) {
        console.error('发送失败:', error);
        if (error.response) {
          console.error('后端响应状态码:', error.response.status);
          console.error('后端响应数据:', error.response.data);
        }
        alert('发送失败');
      }
    },
  },
};
</script>

<style scoped>



.search-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
</style>
